export const addStaticPicture = (editor) => {
    const {
        Components
    } = editor;
    Components.addType('staticPicture', {
        model: {
            defaults: {
                name: 'staticPicture',
                droppable: false,
                attributes: {
                    num:3,
                    // 这里导出的html文件默认没有更改，还是这里的基本配置，可能需要对接后端
                    pictureSource:[
                        // 'https://gcu-ht.gcu.edu.cn/_css/tpl/default/anologdata/1.jpg',
                        // 'https://gcu-ht.gcu.edu.cn/_css/tpl/default/anologdata/2.jpg'
                    ],
                    content:JSON.stringify([
                        '<h2>文章标题1</h2><p>这里是文章内容简介</p>',
                        '<h2>文章标题2</h2><p>这里是文章内容简介</p>',
                        '<h2>文章标题3</h2><p>这里是文章内容简介</p>',
                    ]),
                    'data-gjs-type':"staticPicture",
                    idd:1,
                },
                traits:[
                    {
                        type: 'number',
                        name: 'num',
                        default:3,
                        changeProp: true,
                      },
                ],
                components: [{
                    type: 'div',
                    attributes: {
                        class: 'showPicture'
                    },
                    components: [{
                        type: 'image',
                        name:'staticPicture_showImage',
                        attributes: {
                            class: 'slidePicture',
                            src:''
                        },
                    },
                    {
                        type: 'text',
                        attributes: {
                            class: 'content',
                        },
                        content: `<h2>文章标题</h2><p>这里是文章内容简介</p>`
                    },
                    {
                        type: 'div',
                        attributes: {
                            class: 'slidenav'
                        },
                        content: `<img/>`
                    }
                    ]
                }],
                script() {
                    // 获取当前图片下标
                    // 这里导出html不带sessionStorage，所以一开始要设置成1
                    let idd = sessionStorage.getItem('idd');
                    idd = idd?idd:1;
                    let pictureSource = sessionStorage.getItem('pictureSource');
                    pictureSource = pictureSource?JSON.parse(sessionStorage.getItem('pictureSource')):JSON.parse(this.getAttribute("pictureSource"));
                    // 下面这里是在画布中操作时，同步idd的操作，因为在init监听中与在script监听中更改attribute值，没有真的同步更改(除traits的值)
                    if(idd!=this.getAttribute("idd")){ this.setAttribute("idd",idd);};
                    this.setAttribute("pictureSource",JSON.stringify(pictureSource));
                    // 获取当前图片数
                    let num = this.getAttribute("num");
                    
                    var thx = document.getElementById(this.attributes.id.value);
                    // 切换显示的文段内容
                    let content = thx.getElementsByClassName('content')[0];
                    content.innerHTML = JSON.parse(this.getAttribute("content"))[idd-1];
                    // 导航圆点
                    let slidenav = thx.getElementsByClassName('slidenav')[0];
                    // 展示图片
                    let image = thx.getElementsByClassName('slidePicture')[0];
                    // 悬浮导航圆点显示的图片
                    let slidenavPic = slidenav.getElementsByTagName('img')[0];
                    // 刷新设置当前显示的图片
                    image.src = pictureSource[idd-1];
                    // 动态渲染
                    for (let i = 0; i < num; i++) {
                        let node = document.createElement('li');
                        node.dataset.id = i + 1;
                        node.style.backgroundColor = `${node.dataset.id == idd ? '#fff' : 'rgba(255, 204, 0, .5)'}`;
                        slidenav.appendChild(node);
                        // 悬浮导航圆点
                        node.onmouseover = () => {
                            const showImg = pictureSource[i];
                            if(!showImg) return;
                            slidenavPic.src = showImg;
                            slidenavPic.style.display = 'inherit';
                        }
                        // 导航圆点失焦
                        node.onmouseleave = () => {
                            slidenavPic.style.display = 'none';
                        }
                    }
                    let slidList = slidenav.getElementsByTagName('li');
                    // 添加监听
                    slidenav.onclick = (e) => {
                        if (e.target.dataset.id != null) {
                            idd = this.attributes.idd.value;
                            pictureSource = JSON.parse(this.attributes.pictureSource.value);
                            const imgSrc = pictureSource[e.target.dataset.id-1];
                            image.src = imgSrc?imgSrc:'';
                            content.innerHTML = JSON.parse(this.getAttribute("content"))[e.target.dataset.id-1];
                            slidList[idd - 1].style.background = 'rgba(255, 204, 0, .5)';
                            // 这里改了，在init中设置的监听获取的值是未改变的值
                            sessionStorage.setItem('idd',e.target.dataset.id);
                            this.setAttribute("idd",e.target.dataset.id);
                            slidList[e.target.dataset.id - 1].style.backgroundColor = '#fff';
                        }
                    }
                },
                styles: `
                .showPicture {
                    width: 500px;
                    height: 250px;
                    display: flex;
                    align-items: end;
                    justify-content: space-between;
                }
                    .showPicture img {
                        height: inherit;
                        width: inherit;
                        position: absolute;
                    }
                       .slidenav {
                        margin-right: 5%;
                        margin-bottom: 4%;
                        z-index: 9;
                    }

                    .slidenav li:hover {
                            background: #fc0;
                        }
                            .slidenav img{
                            display: none;
                            width: 100px;
                            height: 50px;
                            margin-top: -60px;
                            border: 1px solid white;
                            box-shadow: 0 0 10px #333;
                        }
                    .slidenav li {
                            display: block;
                            float: left;
                            margin: 0 0 0 8px;
                            width: 12px;
                            height: 12px;
                            border-radius: 6px;
                            -moz-border-radius: 6px;
                            -webkit-border-radius: 6px;
                            background: #fc0;
                            background: rgba(255, 204, 0, .5);
                            text-indent: -9999px;
                            outline: 0;
                            box-shadow: 0 0 10px #333;
                            -moz-box-shadow: 0 0 10px #333;
                            -webkit-box-shadow: 0 0 10px #333;
                            cursor: pointer;
                        }

                    .content {
                        display: flex;
                        flex-direction: column;
                        margin-left: 5%;
                        margin-bottom: 4%;
                        z-index: 9;
                        max-width: 60%;
                        min-width: 35%;
                        max-height: 60%;
                        font-size: 12px;
                        text-align: center;
                        background-color: white;
                        color: white;
                        filter: opacity(0.7);
                    }
                        .content  p {
                            color: #fff;
                            background: #000;
                            padding: 12px;
                            line-height: 1.5em;
                            list-style: none;
                            margin: 0;
                        }
                            .content h2 {
                            background: #990000;
                            color: #fff;
                            font-size: 1.5em;
                            font-family: "ProximaNova", "Helvetica Neue", Arial, sans-serif;
                            margin: 0;
                            padding: 8px 12px;
                            border-bottom: 1px solid #fc0;
                        }
                `,
            },
            init() {  
                // 组件初始化时的代码  
                let that = this;
                // 由于试了很多次attributes操作，init和script中的操作无法同步，于是改用session存储操作
                sessionStorage.setItem('pictureSource',JSON.stringify([]));
                sessionStorage.setItem('idd',1);
                // 设置监听修改num属性
                that.on('change:num', function() {
                    // 范围2~6
                    if(that.attributes.num>6||that.attributes.num<2)return;
                    // 当属性变化时触发的代码 
                    //   this.set('attributes.num',  this.get('attributes').num );
                    if(that.get('attributes').num > that.attributes.num)
                        sessionStorage.setItem('idd',1);//重置为1，防止越界
                    // 不要用set，有问题的
                    that.get('attributes').num = that.attributes.num
                    let allContent = JSON.parse(that.get('attributes').content);
                    const acnum = allContent.length;
                    if(that.attributes.num>acnum){
                        for(let i = 0;i<(that.attributes.num-acnum);i++)
                            allContent.push('<h2>文章标题</h2><p>这里是文章内容简介</p>');
                        that.get('attributes').content = JSON.stringify(allContent);
                    }
                    // 回调script
                    that.trigger("change:script");
                });  

                // 获取image组件对象
                let curImg = that.getChildAt(0).getChildAt(0);
                // 添加图片切换监听
                curImg.on('change:src', function() {
                    let addPic = JSON.parse(sessionStorage.getItem('pictureSource'));
                    addPic[sessionStorage.getItem('idd')-1] = curImg.attributes.src;
                    sessionStorage.setItem('pictureSource',JSON.stringify(addPic));
                    that.trigger("change:script");
                });  

              }, 
        },
    });

    // 注册 customCheckbox 组件
    editor.BlockManager.add('static-picture', {
        label: '多图交互(手动)',
        category: '图片类',
        media:`<svg t="1720770375693" class="icon" viewBox="0 0 1239 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="63867" width="30" height="30"><path d="M1158.736842 0a80.842105 80.842105 0 0 1 80.842105 80.842105v862.31579a80.842105 80.842105 0 0 1-80.842105 80.842105H80.842105a80.842105 80.842105 0 0 1-80.842105-80.842105V80.842105a80.842105 80.842105 0 0 1 80.842105-80.842105h1077.894737z m0 53.894737H80.842105a26.947368 26.947368 0 0 0-26.758737 23.794526L53.894737 80.842105v862.31579a26.947368 26.947368 0 0 0 23.794526 26.758737L80.842105 970.105263h1077.894737a26.947368 26.947368 0 0 0 26.758737-23.794526L1185.684211 943.157895V80.842105a26.947368 26.947368 0 0 0-23.794527-26.758737L1158.736842 53.894737z"  p-id="63868"></path><path d="M1071.777684 623.023158l-238.214737-294.319158c-6.090105-12.018526-24.414316-12.018526-36.648421-6.009263l-293.187368 216.225684-146.593684-102.103579c0-6.009263-18.324211-6.009263-24.414316 6.009263l-164.917895 180.197053C161.684211 629.032421 161.684211 641.024 161.684211 647.006316c6.117053 6.009263 12.207158 12.018526 24.441263 12.018526h867.328c12.234105 0 18.324211-6.009263 24.441263-12.018526 0-6.009263 0-18.000842-6.117053-24.010105zM292.567579 240.208842a78.524632 78.524632 0 1 0 157.07621 0 78.524632 78.524632 0 0 0-157.07621 0z" p-id="63869"></path><path d="M377.263158 808.421053m-53.894737 0a53.894737 53.894737 0 1 0 107.789474 0 53.894737 53.894737 0 1 0-107.789474 0Z" p-id="63870"></path><path d="M538.947368 808.421053m-53.894736 0a53.894737 53.894737 0 1 0 107.789473 0 53.894737 53.894737 0 1 0-107.789473 0Z"  p-id="63871"></path><path d="M700.631579 808.421053m-53.894737 0a53.894737 53.894737 0 1 0 107.789474 0 53.894737 53.894737 0 1 0-107.789474 0Z" p-id="63872"></path><path d="M862.315789 808.421053m-53.894736 0a53.894737 53.894737 0 1 0 107.789473 0 53.894737 53.894737 0 1 0-107.789473 0Z" p-id="63873"></path></svg>`,
        content: {
            type: 'staticPicture'
        },
    });
};